<template>
	<view class="enjoy-space">
		<!-- 畅玩专区图片 -->
		<image :src="imageUrl('enjoy-space-picture.png')" mode="" class="enjoy-space-pic" />

		<!-- 版心 -->
		<view class="enjoy-space-banner just-space-between">
			<!-- 畅玩专区 -->
			<enjoyThemeText title="畅玩专区" :textStrokeBlue="true" />

			<view class="enjoy-space-right">
				<image :src="imageUrl('enjoy-record-bg.png')" mode="" class="enjoy-record-bg" @click="clickRecord" />
				<text class="active left" data-text="畅玩记录" @click="clickRecord">畅玩记录</text>
				<image :src="imageUrl('enjoy-rules-bg.png')" mode="" class="enjoy-rules-bg" @click="clickRules" />
				<text class="active right" data-text="规则" @click="clickRules">规则</text>
			</view>
		</view>

		<!-- 畅玩卡片 -->
		<view class="enjoy-card" @click="clickEnjoyCard">
			<!-- 专区图片背景1 -->
			<image src="../../static/images/boom/boom-detail/award-doll.png" mode="" class="enjoy-card-img" />

			<!-- 畅玩边框 -->
			<image :src="imageUrl('enjoy-card-bg.png')" mode="" class="enjoy-border" />

			<!-- 专区热度 -->
			<image :src="imageUrl('enjoy-hot-num.png')" mode="" class="enjoy-hot-num" data-text="738297" />

			<!-- 畅玩弹幕 3排 -->
			<view class="barrage-list">
				<!-- 第一排 -->
				<view class="barrage-line">
					<!-- 单个弹幕 -->
					<view class="barrage-item" :style="{'animation-delay':'.5s'}">
						<!-- 用户头像 -->
						<image src="../../static/images/boom/boom-detail/award-doll.png" mode=""
							class="barrage-item-pic" />
						<!-- 用户名称 -->
						<text class="barrage-item-name" :class="{red:true,orange:false}">
							第一排第一
						</text>
						<!-- 提示文本 -->
						<text>进入了畅玩专区</text>
					</view>
					<view class="barrage-item" :style="{'animation-delay':'3.5s'}">
						<!-- 用户头像 -->
						<image src="../../static/images/boom/boom-detail/award-doll.png" mode=""
							class="barrage-item-pic" />
						<!-- 用户名称 -->
						<text class="barrage-item-name" :class="{red:true,orange:false}">
							第一排第二
						</text>
						<!-- 提示文本 -->
						<text>进入了畅玩专区</text>
					</view>
				</view>
				<!-- 第二排 -->
				<view class="barrage-line">
					<!-- 单个弹幕 -->
					<view class="barrage-item" :style="{'animation-delay':'2.5s'}">
						<!-- 用户头像 -->
						<image src="../../static/images/boom/boom-detail/award-doll.png" mode=""
							class="barrage-item-pic" />
						<!-- 用户名称 -->
						<text class="barrage-item-name" :class="{red:false,orange:true}">
							第二排第一
						</text>
						<!-- 提示文本 -->
						<text>进入了畅玩专区</text>
					</view>
					<view class="barrage-item" :style="{'animation-delay':'6s'}">
						<!-- 用户头像 -->
						<image src="../../static/images/boom/boom-detail/award-doll.png" mode=""
							class="barrage-item-pic" />
						<!-- 用户名称 -->
						<text class="barrage-item-name" :class="{red:false,orange:true}">
							第二排第二
						</text>
						<!-- 提示文本 -->
						<text>进入了畅玩专区</text>
					</view>
				</view>
				<!-- 第三排 -->
				<view class="barrage-line">
					<!-- 单个弹幕 -->
					<view class="barrage-item" :style="{'animation-delay':'1.9s'}">
						<!-- 用户头像 -->
						<image src="../../static/images/boom/boom-detail/award-doll.png" mode=""
							class="barrage-item-pic" />
						<!-- 用户名称 -->
						<text class="barrage-item-name" :class="{red:true,orange:false}">
							第三排第一
						</text>
						<!-- 提示文本 -->
						<text>进入了畅玩专区</text>
					</view>
					<view class="barrage-item" :style="{'animation-delay':'7s'}">
						<!-- 用户头像 -->
						<image src="../../static/images/boom/boom-detail/award-doll.png" mode=""
							class="barrage-item-pic" />
						<!-- 用户名称 -->
						<text class="barrage-item-name" :class="{red:true,orange:false}">
							第三排第二
						</text>
						<!-- 提示文本 -->
						<text>进入了畅玩专区</text>
					</view>
				</view>
			</view>

			<!-- 3d盒子 -->
			<scroll-view scroll-x="true" class="scroll-x-box">
				<view class="box-3d-box">
					<view class="box-3d" v-for="item in 7">
						<image :src="imageUrl('enjoy-box-threeD.png')" mode="" class="box-3d-bg" />
						<image src="../../static/images/boom/boom-detail/award-doll.png" mode="" class="box-3d-pic" />
					</view>
				</view>
			</scroll-view>

			<!-- 畅玩专区名称 -->
			<text class="fontactive" data-text="60分钟/畅玩专区">60分钟/畅玩专区</text>

			<!-- 价格 -->
			<view class="enjoy-price">
				<image :src="imageUrl('enjoy-money-icon.png')" mode="" class="enjoy-money-icon" />
				<text>¥ 2800.00</text>
			</view>

		</view>

		<!-- 规则弹出层 -->
		<u-popup :show="showRules" mode="center" bgColor="transparent" :safeAreaInsetBottom="false" @close="closeRules">
			<view class="rule-popup" data-text="畅玩规则">
				<image :src="imageUrl('enjoy-rule-popup.png')" mode="" class="enjoy-rule-popup" />
				<scroll-view scroll-y="true" class="popup-text">
					正文文案内容规则正文文案内容规则
					正文文案内容规则正文文案内容规则正文
					文案内容规则正文文案内容规则正文文案
					内容规则正文文案内容规则正文文案内容
					规则正文文案内容
					正文文案内容规则正文文案内容规则
					正文文案内容规则正文文案内容规则正文
					文案内容规则正文文案内容规则正文文案
					内容规则正文文案内容规则正文文案内容
					规则正文文案内容正文文案内容规则正文文案内容规则
					正文文案内容规则正文文案内容规则正文
					文案内容规则正文文案内容规则正文文案
					内容规则正文文案内容规则正文文案内容
					规则正文文案内容正文文案内容规则正文文案内容规则
					正文文案内容规则正文文案内容规则正文
					文案内容规则正文文案内容规则正文文案
					内容规则正文文案内容规则正文文案内容
					规则正文文案内容正文文案内容规则正文文案内容规则
					正文文案内容规则正文文案内容规则正文
					文案内容规则正文文案内容规则正文文案
					内容规则正文文案内容规则正文文案内容
					规则正文文案内容正文文案内容规则正文文案内容规则
					正文文案内容规则正文文案内容规则正文
					文案内容规则正文文案内容规则正文文案
					内容规则正文文案内容规则正文文案内容
					规则正文文案内容
				</scroll-view>

				<!-- 关闭按钮 -->
				<uni-icons type="close" size="64rpx" color="#fff" class="close-icon" @click="closeRules"></uni-icons>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import enjoyThemeText from './components/enjoyThemeText.vue'
	export default {
		components: {
			enjoyThemeText
		},
		data() {
			return {
				showRules: false
			}
		},
		methods: {
			// 畅玩记录
			clickRecord() {
				uni.navigateTo({
					url: '/pages/enjoyspace/EnjoyRecord'
				})
			},
			// 规则
			clickRules() {
				// 规则弹出层
				this.showRules = true
			},
			// 关闭弹出层
			closeRules() {
				this.showRules = false
			},
			// 畅玩详情
			clickEnjoyCard() {
				uni.navigateTo({
					url: '/pages/enjoyspace/EnjoyDetail'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #0A0A0A;
	}

	.enjoy-space {

		// 版心
		.enjoy-space-banner {
			padding: 0 30rpx;
		}

		// 两端
		.just-space-between {
			display: flex;
			justify-content: space-between;
		}

		// 图片
		.enjoy-space-pic {
			width: 100vw;
			height: 360rpx;
			margin-bottom: 36rpx;
		}

		.enjoy-space-right {
			position: relative;
			display: flex;

			.enjoy-record-bg {
				width: 230rpx;
				height: 48rpx;
				transform: translateX(50rpx);
			}

			.enjoy-rules-bg {
				width: 152rpx;
				height: 48rpx;
			}

			.active {
				position: relative;
				font-family: YouSheBiaoTiHei;
				font-size: 36rpx;
				line-height: 48rpx;
				color: #FF7803;
				z-index: 0;

				&::before {
					position: absolute;
					content: attr(data-text);
					top: 0;
					left: 0;
					z-index: -1;
					-webkit-text-stroke: 2rpx #000;
				}

				&.left {
					position: absolute;
					top: 0;
					right: 166rpx;
				}

				&.right {
					position: absolute;
					top: 0;
					right: 26rpx;
				}
			}
		}

		// 畅玩专区卡片
		.enjoy-card {
			position: relative;
			width: 690rpx;
			height: 792rpx;
			margin: 20rpx auto 0;
			overflow: hidden;

			// 专区图片
			.enjoy-card-img {
				width: 690rpx;
				height: 660rpx;
				border-radius: 0 30rpx 0 0;
			}

			// 专区边框
			.enjoy-border {
				position: absolute;
				top: 0;
				left: 0;
				width: 690rpx;
				height: 792rpx;
			}

			// 热度
			.enjoy-hot-num {
				position: absolute;
				top: 0;
				right: 0;
				width: 274rpx;
				height: 64rpx;

				&::after {
					position: absolute;
					top: 50%;
					left: 50%;
					content: attr(data-text);
					color: #fff;
					transform: translate(-50%, -50%);
				}
			}

			// 弹幕平移
			@keyframes barrageMove {
				from {
					left: 750rpx;
				}

				to {
					left: -750rpx;
				}
			}

			// 弹幕
			.barrage-list {
				position: absolute;
				top: 94rpx;
				padding: 28rpx 0;
				font-size: 20rpx;
				font-weight: 500;
				line-height: 24rpx;
				color: #fff;

				.barrage-line {
					position: relative;
					display: flex;
					margin-top: 50rpx;

					&:nth-child(2) {
						margin-top: 130rpx;
					}

					&:nth-child(3) {
						margin-top: 130rpx;
					}

					&:first-child {
						margin-top: 0;
					}

					.barrage-item {
						position: absolute;
						left: 750rpx;
						flex-shrink: 0;
						display: flex;
						align-items: center;
						width: 350rpx;
						height: 48rpx;
						padding-right: 20rpx;
						// margin-right: 60rpx;
						border-radius: 24rpx;
						background: rgba(0, 0, 0, 0.5);
						box-sizing: border-box;
						// 初始不显示
						// transform: translate(750rpx);
						// 累加延迟时间
						animation: barrageMove linear 8s infinite;

						.barrage-item-pic {
							width: 46rpx;
							height: 46rpx;
							border-radius: 50%;
							border: 4rpx solid #fff;
						}

						.barrage-item-name {
							margin: 0 20rpx;

							&.red {
								color: #FE2861;
							}

							&.orange {
								color: #FF7803;
							}
						}
					}
				}
			}

			.scroll-x-box {
				position: absolute;
				bottom: 130rpx;
				height: 158rpx;
				padding-left: 10rpx;
				box-sizing: border-box;
				overflow: hidden;

				.box-3d-box {
					display: flex;

					.box-3d {
						// 不挤压元素
						flex-shrink: 0;
						position: relative;
						width: 158rpx;
						height: 158rpx;

						.box-3d-bg {
							width: 158rpx;
							height: 158rpx;
						}

						.box-3d-pic {
							position: absolute;
							right: 14rpx;
							bottom: 32rpx;
							width: 100rpx;
							height: 100rpx;
							border-radius: 8rpx;
						}
					}
				}
			}

			// 畅玩专区名称
			.fontactive {
				position: absolute;
				bottom: 48rpx;
				left: 28rpx;
				font-family: YouSheBiaoTiHei;
				font-size: 44rpx;
				line-height: 48rpx;
				color: #FF7803;
				z-index: 0;

				&::before {
					content: attr(data-text);
					position: absolute;
					left: 0;
					z-index: -1;
					-webkit-text-stroke: 8rpx #fff;
				}
			}

			.enjoy-price {
				position: absolute;
				bottom: 56rpx;
				right: 30rpx;
				display: flex;
				align-items: center;
				color: #fff;

				.enjoy-money-icon {
					width: 32rpx;
					height: 32rpx;
					margin-right: 14rpx;
				}
			}
		}

		// 规则弹出层
		.rule-popup {
			position: relative;
			width: 580rpx;
			height: 860rpx;

			// 规则文本
			.popup-text {
				position: absolute;
				width: 520rpx;
				height: 650rpx;
				padding: 18rpx 14rpx;
				margin: 66rpx 20rpx 60rpx 34rpx;
				font-size: 28rpx;
				line-height: 40rpx;
				color: #fff;
				box-sizing: border-box;
			}

			// 关闭弹出层
			.close-icon {
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
			}

			// 弹出层背景图
			.enjoy-rule-popup {
				position: absolute;
				top: 0;
				display: block;
				width: 580rpx;
				height: 780rpx;
			}

			// 右上角文字提示
			&::after {
				position: absolute;
				right: 20rpx;
				content: attr(data-text);
				font-family: YouSheBiaoTiHei;
				font-size: 36rpx;
				line-height: 48rpx;
				color: #FF7803;
			}
		}
	}
</style>
